<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>数据监测</title>
    <script src="./echarts.js"></script>
    <script src="./qwebchannel.js"></script>
    <script language="JavaScript">
        var middle=null;
        var plotData = null;
        var uniformedPlotData = null;
        var plotDataFields = [];
        var dataNumMax=60;
        var xAxis=[];
        var markPoints={};
        var uniformedMarkPoints={};
        var thresh=null;
        var threshRan={};
        document.addEventListener("DOMContentLoaded", function () {
            new QWebChannel(qt.webChannelTransport, function (channel) {
                middle = channel.objects.middle;
                middle.textChanged.connect(function (text) {
                    var dic = JSON.parse(text);
                    // log(text);
                    var data=dic["data"];
                    var above=dic["above"];
                    var below=dic["below"];
                    if (plotData == null) {
                        plotData={};
                        uniformedPlotData={};
                        for (let key in data) {
                            plotDataFields.push(key);
                        }
                        plotDataFields.splice(plotDataFields.indexOf("采集时间"),1);
                        xAxis.push(data['采集时间']);
                        for(let field of plotDataFields){
                            plotData[field] = [data[field]];
                            let n=(data[field]-threshRan[field][0])/threshRan[field][1];
                            uniformedPlotData[field] = [n];

                            markPoints[field]=[];
                            uniformedMarkPoints[field]=[];
                        }
                    } else {
                        if(xAxis.length<dataNumMax){
                            xAxis.push(data['采集时间']);
                            for(let field of plotDataFields){
                                plotData[field].push(data[field]);
                                let n=(data[field]-threshRan[field][0])/threshRan[field][1];
                                uniformedPlotData[field].push(n);
                            }
                        }else{
                            xAxis.push(data['采集时间']);
                            xAxis.shift();
                            for(let field of plotDataFields){
                                plotData[field].push(data[field]);
                                plotData[field].shift();
                                
                                let n=(data[field]-threshRan[field][0])/threshRan[field][1];
                                uniformedPlotData[field].push(n);
                                uniformedPlotData[field].shift();
                            }
                        }
                    };
                    var abnormal={};
                    for(let key in above) abnormal[key]=above[key];
                    for(let key in below) abnormal[key]=below[key];
                    var normal={};
                    for(let key in abnormal) normal[key]=data[key];
                    var params={
                        "采集时间":data["采集时间"],
                        "abnormal":abnormal,
                        "normal":normal
                    };
                    updateChart(params);
                });
                middle.threshChanged.connect(function (text){
                    thresh=JSON.parse(text);
                    for(let key in thresh){
                        let lower=thresh[key]["error"][0];
                        let ran=thresh[key]["error"][1]-lower;
                        threshRan[key]=[lower,ran];
                    }
                });
            });
        });
        window.onload = function () {
            var timeoutId = window.setTimeout(function () { resize(); }, 500);
        }
        var isMaximum=false;
        var isUniform=true;
        var opt="全部";
    </script>
    <style>
        html,body,#main{
            margin:0px;
            padding:0px;
            width:100%;
            height:100%;
        }
        #minmax{
            width: 30px;
            height: 30px;
            background-size: 30px 30px;
            background-image: url(max.svg);
            position:absolute;
            z-index: 99;
            right: 10px;
        }
        #minmax:hover{
            margin-right: 3px;
            margin-bottom: 3px;
            background-color:lightgreen;
            border-radius: 15px;
        }
        #container{
            background-image: -webkit-cross-fade(url('white.jpg'), url('background.jpg'), 40%);
            background-image: cross-fade(url('white.jpg'), url('background.jpg'), 40%);
            background-size: 100% 100% !important; /*注意：背景图大小宽高都给到100%,且加上最高权重*/
        }
        label{
            font: 14pt "黑体";
        }
        label:hover{
            color:dodgerblue;
        }
    </style>
</head>
<body>
    <div id="log"></div>
    <div id="minmax" onclick="minmaxClicked()"></div>
    <div id="container">
        <div style="margin-bottom:6px;">
            <form action="" method="get"> 
                <label><input name="uniform" type="checkbox" value="" checked onclick="onUniformClicked()" />归一化 </label>
                <label><input name="opts" type="radio" checked onclick="onOptChanged('全部')"/>全部 </label>
                <label><input name="opts" type="radio" onclick="onOptChanged('三相电压')"/>三相电压 </label>
                <label><input name="opts" type="radio" onclick="onOptChanged('三相电流')"/>三相电流 </label> 
                <label><input name="opts" type="radio" onclick="onOptChanged('有功功率')"/>有功功率 </label> 
                <label><input name="opts" type="radio" onclick="onOptChanged('无功功率')"/>无功功率 </label> 
                <label><input name="opts" type="radio" onclick="onOptChanged('温度')"/>温度 </label> 
                <label><input name="opts" type="radio" onclick="onOptChanged('瞬时流量')"/>瞬时流量 </label> 
                <label><input name="opts" type="radio" onclick="onOptChanged('出口压力')"/>出口压力 </label>
                <label><input name="opts" type="radio" onclick="onOptChanged('液位')"/>液位 </label> 
                <label><input name="opts" type="radio" onclick="onOptChanged('压力')"/>压力 </label> 
            </form> 
        </div>
        <div id="main"></div>
    </div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                tooltip: {},
                grid:{
                    x:60,
                    y:70,
                    x2:50,
                    y2:60,
                    borderWidth:10
                },
                legend: {
                    type: 'scroll',
                    right:40,
                    data: plotDataFields,
                    textStyle: {
                        fontSize: 18
                    },
                    inactiveColor: "#2A4359",//未选中时的颜色
                },
                xAxis: {
                    data: xAxis,
                    axisLabel: {
                        show: true,
                        rotate:40,
                        textStyle: {
                            fontSize : 15,
                            color:'#000000'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize : 15,
                            color:'#000000'
                        }
                    }
                },
                series: []
            };
        function updateChart(params) {
            option.series=[];
            for(let key in params["abnormal"]){
                if(params["abnormal"][key]==-1){
                    let item={ value: "空值", xAxis: params["采集时间"], yAxis: params["normal"][key], itemStyle:{color:'#7E8054'}};
                    markPoints[key].push(item);
                    let y=(params["normal"][key]-threshRan[key][0])/threshRan[key][1];
                    let item2={ value: "空值", xAxis: params["采集时间"], yAxis: y, itemStyle:{color:'#7E8054'} };
                    uniformedMarkPoints[key].push(item2);
                }else{
                    let item={ value: "异常值\n"+params["abnormal"][key], xAxis: params["采集时间"], yAxis: params["normal"][key] };
                    markPoints[key].push(item);
                    let y=(params["normal"][key]-threshRan[key][0])/threshRan[key][1];
                    let item2={ value: "异常值\n"+params["abnormal"][key], xAxis: params["采集时间"], yAxis: y };
                    uniformedMarkPoints[key].push(item2);
                }
                if(markPoints[key].length>dataNumMax){
                    markPoints[key].shift();
                    uniformedMarkPoints[key].shift();
                }
            }
            for (let key in plotData) {
                option.series.push({
                    name: key,
                    type: 'line',
                    data: isUniform?uniformedPlotData[key]:plotData[key],
                    markPoint:{
                        data:isUniform?uniformedMarkPoints[key]:markPoints[key],
                        symbolSize:70,
                    },
                });
            }
            myChart.setOption(option);
        }
        function resize() {
            var main = document.getElementById('main');
            main.style.width = (window.innerWidth) + "px";
            main.style.height = (window.innerHeight-30) + "px";
            myChart.resize();
        }
        function resizeLater(milliseconds) {
            setTimeout(function(){
                resize();
            },milliseconds);
        }
        function log(s){
            document.getElementById('log').innerText=s;
        }
        function minmaxClicked(){
            isMaximum=!isMaximum;
            if(isMaximum){
                document.getElementById('minmax').style.backgroundImage='url(min.svg)';
            }else{
                document.getElementById('minmax').style.backgroundImage='url(max.svg)';
            }
            middle.webMinmaxClicked(isMaximum);
        }
        function onUniformClicked(){
            isUniform=!isUniform;
        }
        function onOptChanged(newOpt){
            if(opt==newOpt)
                return;
            opt=newOpt
            var selectedFields;
            if(opt=="全部"){
                selectedFields=plotDataFields;
            }else if(opt=="三相电压"){
                selectedFields=["A相电压","B相电压","C相电压"];
            }else if(opt=="三相电流"){
                selectedFields=["A相电流量","B相电流量","C相电流量"];
            }else if(opt=="有功功率"){
                selectedFields=["有功功率"];
            }else if(opt=="无功功率"){
                selectedFields=["无功功率"];
            }else if(opt=="温度"){
                selectedFields=["前轴承温度","后轴承温度","定子中部温度","定子前部温度","定子后部温度","泵前轴温度","泵后轴温度"];
            }else if(opt=="瞬时流量"){
                selectedFields=["瞬时流量"];
            }else if(opt=="出口压力"){
                selectedFields=["出口压力"];
            }else if(opt=="液位"){
                selectedFields=["地下油箱液位","高架油箱液位"];
            }else if(opt=="压力"){
                selectedFields=["润滑油压力","电机冷却水压力","进口压力","泵平衡压力", "泵润滑油压力","电机润滑油压力"];
            }
            myChart.dispatchAction({
                type: 'legendAllSelect',
            });
            myChart.dispatchAction({
                type: 'legendInverseSelect',
            });
            for(let field of selectedFields){
                myChart.dispatchAction({
                    type: 'legendSelect',
                    name: field
                });
            }
        }
    </script>
</body>

</html>